<template>
  <div>
    <!--search bar layout-->
    <div class="search-bar">
        <van-row >
                <van-col span="3" >
                    <img :src="locationIcon" width="80%" class="location-icon"/>
                </van-col>
                <van-col span="16">
                    <input type="text" class="search-input" />
                </van-col>
                <van-col span="5">
                    <van-button size="mini">查找</van-button>
                </van-col>
        </van-row>
    </div>
    <!--swipwer area-->
    <div class="swiper-area">
        <van-swipe :autoplay="2000">
            <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
                <img  :src="banner.image" width="100%"/>
                <!-- v-lazy="banner.image"  图片懒加载 -->
            </van-swipe-item>
        </van-swipe>
    </div>
    <!--type bar-->
    <div class="type-bar">
        <div v-for="(cate,index) in category" :key="index">
            <img v-lazy="cate.image" width="90%">
            <span>{{cate.mallCategoryName}}</span>

        </div>
    </div>
    <!--adbanner area-->
    <div>
        <img v-lazy="adBanner" width="100%" />
    </div>
    <!--swiper-->
    <swiper :options="swiperOption">
        <swiper-slide v-for=" (item ,index) in recommendGoods" :key="index">
            <div class="recommend-item">
                <img :src="item.image" width="80%" />
                <div>{{item.goodsName}}</div>
                <div>￥{{item.price | Money }} (￥{{item.mallPrice | Money }})</div>
            </div>
        </swiper-slide>
    </swiper>
    <!-- swiperTest -->
    <!-- <swiperDefalut></swiperDefalut> -->
    <!--floor one area-->
    <floorComponent :floorData='floor1' :floorName='floorName.floor1'></floorComponent>
    <floorComponent :floorData='floor2' :floorName='floorName.floor2'></floorComponent>
    <floorComponent :floorData='floor3' :floorName='floorName.floor3'></floorComponent>
    <!--Hot Area-->
    <div class="hot-area">
        <div class="hot-title">热卖商品</div>
        <div class="hot-goods">
          <!--这里需要一个list组件-->
          <van-list>
            <van-row gutter="20">
                <van-col span="12" v-for="( item, index) in hotGoods" :key="index">
                    <!-- <div>{{item.name}}</div>
                     -->
                     <goodsInfo :goodsImage="item.image" :goodsId='item.goodsId' :goodsName="item.name" :goodsPrice="item.price"></goodsInfo>
                </van-col>
            </van-row>
          </van-list>
        </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  // vue-awesome-swiper使用S  这种方式是在需要的页面以component 的形式引入，好处就是依赖性不强。
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  // vue-awesome-swiper使用E
  // vue-awesome-swiper使用他单独的组件
  import swiperDefalut from '../swiper/swiperDefault'
  // 导入楼层组件
  import floorComponent from '../component/floorComponent'
  // 导入金钱过滤器
  import {toMoney} from '@/filter/moneyFilter';
  // 热卖商品列表
  import goodsInfo from '../component/goodsInfoComponent';
  // 导入接口配置文件
  import url from '../../serviceAPI.config'
  export default {
    data() {
      return {
        locationIcon: require('../../assets/images/location.png'),  //搜索图标。 data里面的图片引入方式,
        bannerPicArray:[], //轮播图片
        category:[],  //bar数据
        adBanner:'',  //获得广告图片
        recommendGoods:[], //推荐商品数据
        swiperOption:{
            slidesPerView:3 //vue-awesome-swiper 一行显示多少个
        },
        // 楼层
        floor1:[],
        floor2:[],
        floor3:[],
        floorName:{},
        // 热卖
        hotGoods:[]
      }
    },
    components:{
      swiper,
      swiperSlide,
      swiperDefalut,
      floorComponent,
      goodsInfo
    },
    filters:{
      Money(money){
        return toMoney(money)
      }
    },
    created(){
      // 使用mock去模拟数据
      axios({
        url:url.getShoppingMallInfo,
        method:'get',
      }).then(response=>{
        if(response.status==200){
          this.bannerPicArray=response.data.data.slides; //轮播图片
          this.category=response.data.data.category; //bar数据
          this.adBanner=response.data.data.advertesPicture.PICTURE_ADDRESS; //获得广告图片
          this.recommendGoods=response.data.data.recommend;  //推荐商品数据
          this.floor1 = response.data.data.floor1              //楼层1数据
          this.floor2 = response.data.data.floor2              //楼层2数据
          this.floor3 = response.data.data.floor3              //楼层3数据
          this.floorName=response.data.data.floorName  //楼层名称
          this.hotGoods=response.data.data.hotGoods  //热卖商品

        }
        console.log(response);
      }).catch(err=>{

      })
    }
  }
</script>

<style scoped>
  .search-bar{
        height:2.2rem;
        background-color: #e5017d;
        line-height: 2.2rem;
        overflow: hidden;
    }
    .search-input{
        width:100%;
        height: 1.3rem;
        border-top:0px;
        border-left:0px;
        border-right:0px;
        border-bottom:1px solid #fff !important;
        background-color: #e5017d;
        color:#fff;
    }
    .location-icon{
        padding-top:.2rem;
        padding-left:.3rem;
    }
  /* 轮播图 */
  .swiper-area{
      clear:both;
      max-height:15rem;
      overflow: hidden;
  }
  /* bar */
  .type-bar{
      background-color: #fff;
      margin:0 .3rem .3rem .3rem;
      border-radius: .3rem;
      font-size:14px;
      display: flex;
      flex-direction:row;
      flex-wrap:nowrap;
  }
  .type-bar div{
      padding: .3rem;
      font-size: 12px;
      text-align: center;
      flex:1;
  }
  /* 推荐商品 */
  .recommend-body{
       border-bottom: 1px solid #eee;
   }
  .recommend-item{
      width:99%;
      border-right: 1px solid #eee;
      font-size: 12px;
      text-align: center;
  }
  /* 热卖 */
  .hot-title{
    padding:.3rem 0;
    background:#ccc;
    font-size: 1rem;
  }
  .hot-area{
      text-align: center;
      font-size:14px;
      height: 1.8rem;
      line-height:1.8rem;
  }

  /* 解决拉不到底 */
  .hot-goods{
    height: 130rem;
    overflow: hidden;
    background-color: #fff;
}
</style>
